<template>
    <page-wrapper>
        <div class="home_wrapper flex-row">
            <div class="home_module">
                <a-card title="任务中心" class="card_module">
                    <!-- <a slot="extra" class="more" href="#">MORE>></a> -->
                    <task-info :userId="userId" style="height:298px" />
                </a-card>
            </div>
            <div class="home_module">
                <a-card title="施工地图" class="card_module">
                    <div class="flex-column">
                        <a-button class="go_map" :disabled="hasPermPage('/supervision/map/index')" type="primary" @click="goMap()">进入地图</a-button>
                        <map-marker @mapErrorLoad="mapReload()" style="height:340px;"/>
                    </div>
                </a-card>
            </div>
            <div class="home_module">
                <a-card title="消息中心" class="card_module">
                    <router-link to="/message/index" slot="extra" class="more">MORE>></router-link>
                    <message-info :userId="userId"/>
                </a-card>
            </div>
            <div class="home_module">
                <a-card title="工具中心" class="card_module">
                    <tool-info :userId="userId" />
                </a-card>
            </div>
        </div>
    </page-wrapper>
</template>
<script>
import TaskInfo from './components/task.vue'
import messageInfo from './components/message.vue'
import MapMarker from './components/map'
import ToolInfo from './components/tool.vue'
import { getCache } from '@/utils/session';
import { hasPermPage } from '@/utils/permission';

export default {
    components: {
        TaskInfo,
        messageInfo,
        MapMarker,
        ToolInfo
    },
    data() {
        let userInfo = getCache('userInfo') || { userId: '' };
        let { userId } = userInfo;
        return {
            userId
        }
    },
    methods:{
        //去往施工地图
        goMap(){
            let ishas = hasPermPage('/supervision/map/index');
            if(!ishas){
                this.$router.push('/supervision/map/index')
            }else{
                this.$message.error('暂无权限')
            }
        },
        //地图加载问题，重刷页面
        mapReload(){
            setTimeout(()=>{
                location.reload()
            },1000)
        }
    }

}
</script>
<style lang="scss" scoped>
.home_wrapper {
    flex-wrap: wrap;

    .home_module {
        margin-bottom: 20px;
        width: calc(50% - 10px);
        box-sizing: border-box;
        box-shadow: 0 0 9px 3px rgba($color: #000000, $alpha: 0.04);

        &:nth-child(2n-1) {
            margin-right: 10px;
        }

        &:nth-child(2n) {
            margin-left: 10px;
        }

        .card_module {
            position: relative;
            height: 100%;
            ::v-deep .ant-card-body{
                padding: 0;
                height:100%;
            }
            .go_map{
                position: absolute;
                top: 10px;
                right: 10px;
            }
        }
        .more{
            font-size: 14px;
            color: #b7b7b7;
        }
    }
}</style>